<template>
	<!-- <view class="chat-footer">
		<view class="chat-footer-top">
			<ImageBoxVue src="/static/msg/msg_speak.png" width="60rpx" height="60rpx"></ImageBoxVue>
			<view class="chat-input">
				<textarea @confirm="confirm" auto-height confirm-type="send" maxlength="-1" class="chat-input-textarea" v-model="chatContent"></textarea>
				
			</view>
			<ImageBoxVue src="/static/msg/msg_face.png" width="60rpx" height="60rpx"></ImageBoxVue>
			<ImageBoxVue @click="handleShowBtns" src="/static/msg/mag_add.png" width="60rpx" height="60rpx">
			</ImageBoxVue>
		</view>
		<view v-if="showBtns" class="chat-footer-bottom" :class="{ 'show': showBtns }">
			<view class="btn flex flex-col" v-for="e,i in btns" :key="i">
				<view class="btn-item">
					<ImageBoxVue :src="e.url" width="60rpx" height="60rpx"></ImageBoxVue>
				</view>
				<text>{{e.text}}</text>
			</view>
		</view>
	</view> -->
	<view class="p-20 w-full bg-white" :style="{paddingBottom:keyHeight}">
		<view class="flex items-center">
			<ImageBoxVue src="/static/msg/msg_speak.png" width="60rpx" height="60rpx" @click="inputType=!inputType">
			</ImageBoxVue>
			<uni-easyinput v-if="inputType" type="text" v-model="msg" class="mx-10" placeholder="说点什么"
				:cursorSpacing="40" :adjust-position="false" @keyboardheightchange="keyboardheightchange" />
			<getSoundVue v-else @createCustomMessage="createCustomMessage"></getSoundVue>
			<!--<view class="flex justify-center items-center shadow p-20 rounded-lg flex-1" v-else
				@touchstart="startRecord">
				<text>按住说话</text>
			</view> -->
			<view class="flex items-center">
				<ImageBoxVue class="mx-10" src="/static/msg/msg_face.png" width="60rpx" height="60rpx"></ImageBoxVue>
				<view class="flex items-center" v-if="msg">
					<button size="mini" style="width:100rpx;padding: 0px;" class="flex" type="primary"
						@click="confirm()">
						<text class="text-xs">发送</text></button>
				</view>
				<ImageBoxVue @click="showBtns=!showBtns" v-else src="/static/msg/mag_add.png" width="60rpx"
					height="60rpx">
				</ImageBoxVue>
			</view>
		</view>
		<view class="flex flex-wrap p-20" v-if="showBtns">
			<view class="flex flex-col justify-center items-center" style="width: 25%;height: 200rpx;"
				v-for="e,i in btns" :key="i" @click="onBtn(e)">
				<ImageBoxVue :src="e.url" width="60rpx" height="60rpx"></ImageBoxVue>
				<text class="mt-10">{{e.text}}</text>
			</view>
		</view>
	</view>
	<!-- 礼物 -->
	<uni-popup ref="giftPopup" type="bottom" borderRadius="10px 10px 0px 0px">
		<view class="bg-white p-10">
			<view class="p-10">
				<text class="text-md font-bold">礼物列表</text>
			</view>
			<view class="flex flex-wrap justify-between items-start overflow-y-auto" style="height: 600rpx;">
				<view
					class="w-[30%] rounded-md border-solid flex flex-col justify-center items-center overflow-hidden mb-10"
					style="border-color: #D7F0FF; border-width: 1px;" v-for="e,i in giftList">
					<ImageBoxVue :src="e.headimg" width="112rpx" height="108rpx"> </ImageBoxVue>
					<text class="text-sm">{{e.name}}</text>
					<view class="flex items-center my-4">
						<ImageBoxVue :src="e.dsts==0?'/static/icons/blue.png':'/static/icons/red.png'" width="28rpx"
							height="28rpx">
						</ImageBoxVue>
						<text class="ml-10 text-[#666666] text-xs">{{e.amount}}钻</text>
					</view>
					<view class="bg-[#329EFF] w-full flex justify-center p-10" @click="memberSendgift(e)">
						<text class="text-[#fff]">赠送</text>
					</view>
				</view>
			</view>
		</view>
	</uni-popup>
	<!-- 	<uni-popup ref="popupRef" type="bottom" border-radius="10px 10px 0 0">
		<view class="bg-white rounded-t-lg p-30">
			<AddPostVue :type-list="typeList" @on-send="onSend"></AddPostVue>
		</view>
	</uni-popup> -->
	<view class="position-absolute">
		<uni-data-picker ref="pickerRef" :localdata="items" popup-title="请选择牌阵" :map="{text:'name',value:'id'}"
			@change="onchange"></uni-data-picker>
	</view>
	<PlayPhoneVue ref="PlayPhoneVueRef"></PlayPhoneVue>
</template>

<script setup>
	import {
		nextTick,
		ref
	} from 'vue'
	import indexApi from '@/apis/apiList/indexApi'
	import getSoundVue from './getSound.vue'
	import msgApi from '../../../apis/apiList/msgApi'
	import liveApi from '../../../apis/apiList/liveApi'
	// import AddPostVue from '@/pages/msg/AddPost';
	import communityApi from '../../../apis/apiList/communityApi'
	import testApi from '../../../apis/apiList/testApi'
	import PlayPhoneVue from '@/components/PlayPhone.vue'
	const showBtns = ref(false)
	const PlayPhoneVueRef = ref()
	const keyHeight = ref('20px')
	const msg = ref("")
	// const popupRef = ref()
	const inputType = ref(true)
	// const typeList = ref([])
	const giftList = ref([])
	const user = uni.getStorageSync('user')
	const giftPopup = ref()
	let fromAccount = ""
	let formName = ''
	const emits = defineEmits(['confirm', 'scrollToBottom', 'createCustomMessage'])
	const btns = ref([{
			text: '发送图片',
			key: "img",
			url: '/static/msg/footer1.png'
		},
		{
			text: '发送星盘',
			key: "astrolabe",
			url: '/static/msg/footer2.png'
		},
		{
			text: '发送合盘',
			key: "astrolabe",
			url: '/static/msg/footer3.png'
		},
		{
			text: '发送卡牌',
			key: "card",
			url: '/static/msg/footer4.png'
		},
		{
			text: '语音通话',
			key: "phone",
			url: '/static/msg/footer5.png'
		},
		{
			text: '赠送礼物',
			key: "gift",
			url: '/static/msg/footer6.png'
		},
		{
			text: '邀请解读',
			key: "addPost",
			url: '/static/msg/footer7.png'
		},
		{
			text: '此处待定',
			key: "",
			url: '/static/msg/footer4.png'
		},
	])
	const keyboardheightchange = (e) => {
		keyHeight.value = `${e.detail.height+20||20}px`
		if (e.detail.height !== 0) {
			showBtns.value = false
			emits('scrollToBottom')
		}
	}
	const pickerRef = ref()
	// 功能点击
	const onBtn = (obj) => {
		if (obj.key == 'img') getImage()
		if (obj.key == 'astrolabe') onStarChart()
		if (obj.key == 'gift') getGiftConfiglist()
		if (obj.key == 'phone') onPrivateChat()
		if (obj.key == 'addPost') addPost()
		if (obj.key == 'card') getTypeList()
	}
	// const getWorkBbsplatelist = () => {
	// 	communityApi.getWorkBbsplatelist().then(res => {
	// 		// tabId.value = res.data[0].id
	// 		typeList.value = res.data
	// 	})
	// }
	// const onSend = () => {
	// 	popupRef.value.close()
	// 	// getPosslistAtplateId(tabId.value)
	// }

	const addPost = () => {
		uni.$once('answer', (params) => {
			console.log(params);
			if (params.posts == 1) {
				// 心理区
				const val = {
					data: 'answer',
					description: JSON.stringify({
						describe: params.describe,
						addparme: params.addparme,
						sinpay: params.sinpay,
						dsts: params.paysts,
					}),
					extension: "psychology"
				}
				emits('createCustomMessage', val)
			}
			if (params.posts == 2) {
				// 星盘
				const val = {
					data: 'answer',
					description: JSON.stringify({
						describe: params.describe,
						selcard: params.selcard,
						sinpay: params.sinpay,
						dsts: params.paysts,
					}),
					extension: "astrolabe"
				}
				emits('createCustomMessage', val)
			}
			if (params.posts == 3) {
				// 卡牌
				const val = {
					data: 'answer',
					description: JSON.stringify({
						describe: params.describe,
						selcard: params.selcard,
						deckId: params['deck.id'],
						sinpay: params.sinpay,
						sdes: params.sdes,
						dsts: params.paysts,
					}),
					extension: "card"
				}
				emits('createCustomMessage', val)
			}
		})
		uni.navigateTo({
			url: '/pages/msg/AddPost/index'
		})
		// getWorkBbsplatelist()
		// nextTick(() => {
		// 	popupRef.value.open()
		// })
	}
	const items = ref([])
	const getTypeList = () => {
		testApi.getDecklistAtAll().then(res => {
			res.data.map(item => {
				item.level = 1
			})
			formatData(res.data)
			items.value = res.data
			pickerRef.value.show()
		})
	}
	const formatData = (data) => {
		data.map(item => {
			item.children = item.sonlist || item.dlist
			if (item.sonlist) {
				formatData(item.sonlist)
			}
			if (item.dlist) {
				formatData(item.dlist)
			}
		})
	}
	const postFrom = ref()
	const deckId = ref()
	const onchange = (e) => {
		// console.log(e);
		const value = e.detail.value
		console.log(value)
		deckId.value = value[0].value
		// postFrom.value['deck.id'] = deckId.value
		// // console.log(postFrom.value)
		uni.$on('chooseTarot', (obj) => {
			console.log(obj)
			// 卡牌
			const val = {
				data: 'answer',
				description: JSON.stringify({
					describe: null,
					selcard: '',
					deckId: deckId.value,
					selectId: obj.id,
					sinpay: '',
					sdes: 1,
					dsts: "",
				}),
				extension: "card"
			}
			emits('createCustomMessage', val)
		})
		uni.navigateTo({
			url: `/pages/test/tarot?id=${deckId.value}&dsts=1&ask=&emit=chooseTarot`
		})
	}
	const getGiftConfiglist = () => {
		msgApi.getGiftConfiglist().then(res => {
			giftList.value = res.data
			giftPopup.value.open()
		})
	}
	const createCustomMessage = (e) => {
		emits('createCustomMessage', e)
	}
	// 送礼
	const memberSendgift = (e) => {
		msgApi.memberSendgift({
			"giftconfig.id": e.id,
			"sender.id": user.id,
			"recder.id": fromAccount
		}).then(res => {
			console.log(res);
			const val = {
				data: 'gift',
				description: JSON.stringify({
					headimg: e.headimg,
					id: e.id,
					orderId: res.data.id,
					name: e.name,
					dsts: e.dsts,
					amount: e.amount,
					receive: 0
				}),
				extension: user.id
			}
			emits('createCustomMessage', val)
		})
	}
	const onPrivateChat = async (val) => {
		const user = uni.getStorageSync('user')
		const info = {
			fromAccount: fromAccount,
			name: formName,
			headimg: formHeadimg
		}
		PlayPhoneVueRef.value.show(true, info)
		// uni.navigateTo({
		// 	url: `/pages/views/makePhone?type=send&fromAccount=${fromAccount}&info=${JSON.stringify({name:formName,headimg:formHeadimg})}`
		// })
	}

	// 跳转选择档案
	const onStarChart = (num) => {
		uni.$once('choose', (chooses) => {
			const val = {
				data: 'astrolabe',
				description: `${chooses.length>1?'双人合盘':'单人星盘'}`,
				extension: chooses.join(",")
			}
			emits('createCustomMessage', val)
		})
		uni.navigateTo({
			url: `/pages/views/starChart`
		})
		// uni.navigateTo({
		// 	url: `/pages/views/archiveList?needCount=${num}`
		// })
	}
	// 发送图片
	const getImage = () => {
		uni.chooseImage({
			count: 1,
			sourceType: ['album'],
			success: e => {
				const params = {
					filePath: e.tempFilePaths[0],
					name: 'file',
				}
				indexApi.upLoadImage(params).then(res => {
					// res.data.url
					const val = {
						data: 'img',
						description: `${res.data.url}`,
						extension: ""
					}
					emits('createCustomMessage', val)
				})
			},
			fail: err => {
				console.log(err);
			}
		})
	}
	// 发送
	const confirm = () => {
		emits('confirm', msg.value)
		nextTick(() => {
			msg.value = ''
		})
	}
	let formHeadimg = ""
	const onInit = (e) => {
		console.log(e);
		fromAccount = e.fromAccount
		formName = e.nickname
		formHeadimg = e.headimg
	}
	defineExpose({
		showBtns,
		onInit
	})
</script>

<style lang="scss" scoped>
	// 	.chat-footer {
	// 		.chat-footer-top {
	// 			width: 100vw;
	// 			min-height: 88rpx;
	// 			border-top: 2rpx solid #eee;
	// 			padding: 4rpx 30rpx;
	// 			display: flex;
	// 			align-items: center;
	// 			justify-content: space-between;

	// 			.chat-input {
	// 				width: 450rpx;
	// 				min-height: 72rpx;
	// 				max-height: 400rpx;
	// 				border-radius: 36rpx;
	// 				background-color: #F0F3F4;
	// 				display: flex;
	// 				align-items: center;
	// 				overflow-y: auto;

	// 				.chat-input-textarea {
	// 					max-height: 400rpx !important;
	// 					padding: 14rpx;
	// 					box-sizing: border-box;
	// 				}
	// 			}
	// 		}

	// 		.chat-footer-bottom {
	// 			box-sizing: border-box;
	// 			display: flex;
	// 			flex-wrap: wrap;
	// 			justify-content: space-between;
	// 			max-height: 0;
	// 			opacity: 0;
	// 			overflow: hidden;
	// 			transition: all 1s ease;
	// 			padding: 0 20rpx;

	// 			&.show {
	// 				max-height: 500rpx;
	// 				opacity: 1;
	// 				padding: 20rpx;
	// 			}

	// 			.btn {
	// 				margin-right: 64rpx;
	// 				margin-bottom: 24rpx;
	// 				align-items: center;
	// 			}

	// 			.btn:nth-child(4n) {
	// 				margin-right: 0;
	// 			}

	// 			.btn:nth-child(n+5) {
	// 				margin-bottom: 0;
	// 			}

	// 			.btn-item {
	// 				width: 120rpx;
	// 				height: 120rpx;
	// 				background: #E5F6FF;
	// 				border-radius: 20rpx;
	// 				display: flex;
	// 				align-items: center;
	// 				justify-content: center;
	// 				margin-bottom: 12rpx;
	// 			}
	// 		}
	// 	}
	// 
	.position-absolute {
		position: absolute;
		top: -2000rpx;
		z-index: 0;
	}
</style>